
<template>
    <van-tabbar border placeholder v-model="active" active-color="#ee0a24" route>
        <van-tabbar-item replace :to="item.path" v-for="(item,index) in foots" :key="index">
        <span>{{ item.text }}</span>
        <template #icon="props">
            <van-icon :name="item.icon"></van-icon>
        </template>
        </van-tabbar-item>
    </van-tabbar>
</template>

<script setup>
import { ref } from 'vue';

const active = ref(0)
const foots =[
    {
        text:'首页',
        name:'home',
        path:'/index/home',
        icon:'home-o',
    },
    {
        text:'分类',
        name:'classify',
        path:'/index/classify',
        icon:'shop-o',
    },
    {
        text:'购物车',
        name:'cart',
        path:'/index/cart',
        icon:'cart-o',
    },
    {
        text:'我的',
        name:'mine',
        path:'/index/mine',
        icon:'contact-o',
    },
]
</script>
